<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EMS</title>
	<style type="text/css">
		#ems{
			position: absolute;
			left: 50%;
			width: 400px;
			height: auto;
			margin-left: -200px;
			background: lightGreen;
			text-align: center;
			min-height: 50px;
			height: 500px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		#ems input{
			height: 25px;
			margin-top: 10px;
		}
		#list{
			background: lightBlue;
		}
		#list li{
			text-align: left;
		}
	</style>
	
</head>
<body>
<div id="ems">
	<div>
		<input type="text" id="code">
		<input type="button" value="查询" id="btn">
	</div>
	<div id="list">
	</div>
</div>
<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			var code = document.getElementById('code').value;
			var xhr = null;
			try{                 //异常处理   
				xhr = new XMLHttpRequest();   //如果这里得代码出错   
			}catch(e){     // 跳到下面执行
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			xhr.open('get','ems.php'+code);

			xhr.send(null);

			xhr.onreadystatechange = function(){

				if(this.readyState == 4 && this.status == 200){
					var data = JSON.parse(this.responseText);
					if(data.status == 0){

						var list = data.data.context;  //获取列表数据信息
						var tag = '';   

						//遍历列表数据信息
						for(var i=0; i<list.length; i++){
							var item = list[i];
							var time = item.time;
							var desc = item.desc;
							var str = t.getFullYear()+'年'+(t.getMonth()+1)+'月'+t.getDay()+'日'+(t.getHours()>12?'下午':'上午')+t.getHours()%12+':'+t.getMinutes()+':'+t.getSeconds();
							var t = new Date();
							t.setTime(item.time+'000');
							tag += '<li><div>'+str+'</div><div>'+item.desc+'</div></li>';
						}

						var ul = document.createElement('ul');
						ul.innerHTML = tag;

						document.getElementById('list').appendChild(ul);   // 将拼接好的数据追加到页面
					}else{   // 如果没有此订单号  返回错误信息
						var info = data.msg;
						document.getElementById('list').innerHTML = info;
					}
				}
			}
			
		}
	}
</script>
</body>
</html>